<template>
  <div>
    <div>
      <div class="operation-group">
        <el-upload
          :show-file-list="false"
          :action="uploadUrl"
          :on-success="onSuccess"
          :on-error="onError"
          :on-progress="onProgress"
          :before-upload="beforeUpload"
          :headers="headers"
          :accept="uploadRule"
          multiple
        >
          <el-button plain type="single-number">上传附件</el-button>
        </el-upload>
      </div>
      <div class="ccui-multifunctional-table-wrapper">
        <el-table
          :data="fileList"
          style="margin-bottom: 20px; width: 100%"
          border
          max-height="409"
        >
          <el-table-column
            :show-overflow-tooltip="true"
            label="序号"
            type="index"
            min-width="20%"
            height="36px"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="fileName"
            label="文件名称"
            min-width="140%"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="fileSize"
            label="文件大小"
            min-width="70%"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="createTime"
            label="上传时间"
            min-width="70%"
          >
            <template slot-scope="{ row }">
              <span>{{ row.createTimeStr || row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            label="操作"
            align="center"
            appendixInfor.vue
            min-width="70%"
          >
            <template slot-scope="{ row, $index }">
              <el-button size="mini" type="text" @click="downLoad(row)"
                >下载</el-button
              >
              <el-button size="mini" type="text" @click="deleteAppend($index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { addUrlPerFix } from "@/basa/utils";
export default {
  name: "uploadInfo",
  model: {
    prop: "parentData",
    event: "uploadSuccess"
  },
  props: {
    parentData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      uploadUrl: addUrlPerFix(process.env.VUE_APP_UPLOAD_URL), //上传图片
      headers: {
        Authorization: Cookies.get("access_token") || ""
      },
      uploadRule: [
        ".xlsx",
        ".xls",
        ".doc",
        ".docx",
        ".ppt",
        ".pptx",
        ".pdf",
        ".jpg",
        ".png",
        ".txt",
        ".rft",
        ".msg",
        ".wps",
        ".et",
        ".dps",
        ".vsd",
        ".prn",
        ".ai",
        ".cad",
        ".JPG",
        ".PNG",
        ".PDF",
        ".tiff",
        ".TIFF",
        ".swf",
        ".SWF",
        ".bmp",
        ".gif",
        ".jpeg",
        ".jpe",
        ".rar",
        ".RAR",
        ".zip",
        ".7z",
        ".lzh",
        ".LZH"
      ],
      uploadLoading: null,
      fileList: [],
      uploadList: []
    };
  },
  created() {
    this.init();
  },
  activated() {
    this.init();
    this.$bus.$on("getTableList", Message => {
      this.files = Message.fileList;
    });
  },
  deactivated() {
    this.fileList = [];
    this.uploadList = [];
  },
  methods: {
    init() {
      const temp = this.parentData.map(n => ({
        ...n,
        fileSize: Math.round(n.fileSize / 1024) + "kb"
      }));
      this.fileList = JSON.parse(JSON.stringify(temp));
      this.uploadList = JSON.parse(JSON.stringify(temp));
    },

    deleteAppend(index) {
      this.fileList.splice(index, 1);
      this.uploadList.splice(index, 1);
    },

    downLoad({ fileInfoId, fileName }) {
      let openUrl = document.createElement("a");
      openUrl.style.display = "none";
      openUrl.href = `${addUrlPerFix(
        process.env.VUE_APP_BASE_URL
      )}/apis/smp/oss/downloadByUploadId?uploadId=${fileInfoId}`;
      openUrl.setAttribute("download", fileName);
      document.body.appendChild(openUrl);
      openUrl.click();
    },

    beforeUpload({ name, size }) {
      const suffix = name.substring(name.lastIndexOf("."));
      let fileType = this.uploadRule.includes(suffix);
      let fileSize = size > 50 * 1024 * 1024;

      if (!fileType) {
        // this.$message({
        //   showClose: true,
        //   message: ,
        //   type: "error",
        //   ccuiCustom: true,
        //   duration: 0
        // });
        this.$showErrorMessage("上传文件格式错误！")
      }

      if (fileSize) {
        // this.$message({
        //   showClose: true,
        //   message: ,
        //   type: "error",
        //   ccuiCustom: true,
        //   duration: 0
        // });
        this.$showErrorMessage("文件大小不可超过50M！")
      }
      return fileType && !fileSize;
    },

    onSuccess({ message, data }) {
      this.$message.success(message);
      this.uploadLoading.close();
      let [{ uploadId, fileName, fileSize, createTime }] = data;
      const obj = {
        uploadId,
        fileName,
        createTime,
        isChangeFlag: 1, // 0=未变更 1=变更
        fileSize: Math.round(fileSize / 1024) + "kb"
      };

      this.fileList.push(obj);
      this.uploadList.push(obj);
    },

    onError({ message }) {
    //   this.$message.error();
      this.$showErrorMessage(message)
      this.uploadLoading.close();
    },

    onProgress(event, file, fileList) {
      this.uploadLoading = this.$loading({
        lock: true,
        text: "上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    }
  },
  watch: {
    uploadList(newVal) {
      this.$emit("uploadSuccess", newVal);
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .ccui-multifunctional-table-wrapper {
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
}
.operation-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}
</style>
